//通过函数返回最新的Variable变量表 更新样式

const generateButton = (Variables)=>{
    return {
         
    // 超大按钮 size=xl
    buttonXlargeHeight:Variables.sizeHeightXxl,                            //超大按钮高度
    buttonXlargeFontSize:Variables.fontSizeXl,                             //超大按钮字体大小
    buttonXlargeFontWeight:Variables.fontWeightBold,                       //超大按钮字重
    buttonXlargeBorderRadius:Variables.radiusS,                            //超大按钮圆角
    buttonXlargeIconSize:Variables.sizeIconM,                              //超大按钮图标尺寸

    //大按钮 size=large
    buttonLargeHeight:Variables.sizeHeightL,                               //大按钮高度
    buttonLargeFontSize:Variables.fontSizeL,                            //大按钮字体大小
    buttonLargeFontWeight:Variables.fontWeightBold,                        //大按钮字重
    buttonLargeBorderRadius:Variables.radiusFull,                          //大按钮圆角
    buttonLargeIconSize:Variables.sizeIconM,                               //大按钮图标尺寸


    //中按钮  size=medium
    buttonMediumHeight:Variables.sizeHeightM,                              //中按钮高度
    buttonMediumFontSize:Variables.fontSizeS,                           //中按钮字体大小
    buttonMediumFontWeight:Variables.fontWeightBold,                       //中按钮字重
    buttonMediumBorderRadius:Variables.radiusFull,                         //中按钮圆角
    buttonMediumIconSize:Variables.sizeIconS,                              //中按钮图标尺寸


    //小按钮  size=small
    buttonSmallHeight:Variables.sizeHeightS,                               //小按钮高度
    buttonSmallFontSize:Variables.fontSizeXxs,                            //小按钮字体大小
    buttonSmallFontWeight:Variables.fontWeightBold,                        //小按钮字重
    buttonSmallBorderRadius:Variables.radiusFull,                          //小按钮圆角
    buttonSmallIconSize:Variables.sizeIconXs,                              //小按钮图标尺寸

    //主要按钮颜色  type=primary
    buttonPrimaryColor:Variables.colorTextWhite,                           //文字颜色
    buttonPrimaryColorActive:Variables.colorTextWhite,                     //文字颜色 - 按下
    buttonPrimaryColorDisable:Variables.colorTextDisableed,                //文字颜色 - 禁用
    buttonPrimaryFill:Variables.colorBrand5,                                           //填充颜色
    buttonPrimaryFillActive:Variables.colorPrimaryActive,                  //填充颜色 - 按下                         
    buttonPrimaryFillDisable:Variables.colorFillDisable,                   //填充颜色 - 禁用



     //次要按钮颜色  type=secondary
     buttonSecondaryColor:Variables.colorBrand5,                                       //文字颜色
     buttonSecondaryColorActive:Variables.colorTextPrimary,                //文字颜色 - 按下
     buttonSecondaryColorDisable:Variables.colorTextDisableed,             //文字颜色 - 禁用
     buttonSecondaryBorderColor:Variables.colorBrand5,                                 //描边颜色
     buttonSecondaryBorderColorActive:Variables.colorPrimaryLightActive,   //描边颜色 - 按下
     buttonSecondaryBorderWidthDisable:Variables.borderWidthZero,          //描边颜色 - 禁用
     buttonSecondaryFill:Variables.colorFillWhite,                         //填充颜色
     buttonSecondaryFillActive:Variables.colorPrimaryLightActive,          //填充颜色 - 按下                         
     buttonSecondaryFillDisable:Variables.colorFillDisable,                //填充颜色 - 禁用



    //次要按钮颜色  type=link
    buttonTextLinkColor:Variables.colorTextLink,                           //文字颜色
    buttonTextLinkColorActive:Variables.colorTextLink,                     //文字颜色 - 按下
    buttonTextLinkColorDisable:Variables.colorTextDisableed,               //文字颜色 - 禁用
    buttonLinkBorderColor:Variables.colorBorderActive,                   //描边颜色
    buttonLinkBorderColorActive:Variables.colorPrimaryLightActive,     //描边颜色 - 按下
    buttonLinkBorderWidthDisable:Variables.borderWidthZero,            //描边颜色 - 禁用
    buttonLinkFill:Variables.colorFillWhite,                           //填充颜色
    buttonLinkFillActive:Variables.colorSecondaryLightActive,          //填充颜色 - 按下                         
    buttonLinkFillDisable:Variables.colorFillDisable,                  //填充颜色 - 禁用

    //次要按钮颜色  type=textlink
    linkTextColor:Variables.colorTextLink,//文字颜色
    linkTextFont:Variables.fontSizeS, //文字字号
    linkTextFillActive:Variables.colorSecondary5,//文字颜色 - 按下        

    //固定宽度
    buttonFixedSmallWidth:70,                                              //小尺寸固定宽度按钮宽度
    buttonFixedLargeWidth:160,                                             //大尺寸固定宽度按钮宽度

    //自适应宽度
    buttonSelfPaddingHorizotal:Variables.spacingL ,
    buttonSSizePaddingHorizotal:Variables.spacingS,
    buttonSmallesPaddingHorizotal:Variables.spacingM

    }
}


const getButtonStyle =(Variables)=>{
    let  ButtonStyle = generateButton(Variables)
    let styles = {
        primary: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: ButtonStyle.buttonPrimaryFill,
            // borderRadius: 2,
            // width: Constant.screenWidth-6,
            // height: 44,       
            color:ButtonStyle.buttonPrimaryColor
        },
        secondary: {
            flexDirection: 'row',            
            justifyContent: 'center',           
            alignItems: 'center', 
            // width: Constant.screenWidth-6,
            // height: 44,
            // borderRadius: 2,  
            borderWidth: 1, 
            borderColor:ButtonStyle.buttonSecondaryBorderColor
            //backgroundColor: '#F9EBEB',
        },
        link:{
            flexDirection: 'row',            
            justifyContent: 'center',           
            alignItems: 'center',  
            borderWidth: 1, 
            borderColor:ButtonStyle.buttonLinkBorderColor
        },
        textlink:{
            flexDirection: 'row',            
            justifyContent: 'center',           
            alignItems: 'center'
        },
        xlarge:{
            height:ButtonStyle.buttonXlargeHeight,
            fontSize:ButtonStyle.buttonXlargeFontSize,
            fontWeight:ButtonStyle.buttonXlargeFontWeight,
            borderRadius:ButtonStyle.buttonXlargeBorderRadius
        },
        large:{
            height:ButtonStyle.buttonLargeHeight,
            fontSize:ButtonStyle.buttonLargeFontSize,
            fontWeight:ButtonStyle.buttonLargeFontWeight,
            borderRadius:ButtonStyle.buttonLargeBorderRadius
        },
        medium:{
            height:ButtonStyle.buttonMediumHeight,
            fontSize:ButtonStyle.buttonMediumFontSize,
            fontWeight:ButtonStyle.buttonMediumFontWeight,
            borderRadius:ButtonStyle.buttonMediumBorderRadius
        },
        small:{
            height:ButtonStyle.buttonSmallHeight,
            fontSize:ButtonStyle.buttonSmallFontSize,
            fontWeight:ButtonStyle.buttonSmallFontWeight,
            borderRadius:ButtonStyle.buttonSmallBorderRadius
        },
        image: {
            width: 24,
            height: 24,
            position: 'relative',
            left: -6,
            resizeMode:'contain'
        },
        xlargeImage:{
            width:ButtonStyle.buttonXlargeIconSize,
            height:ButtonStyle.buttonXlargeIconSize
        },
        largeImage :{
            width:ButtonStyle.buttonLargeIconSize,
            height:ButtonStyle.buttonLargeIconSize
        },
        mediumImage:{
            width:ButtonStyle.buttonMediumIconSize,
            height:ButtonStyle.buttonMediumIconSize
        },
        smallImage:{
            width:ButtonStyle.buttonSmallIconSize,
            height:ButtonStyle.buttonSmallIconSize 
        },
        xlargeContainer:{
            height:ButtonStyle.buttonXlargeHeight,
            borderRadius:ButtonStyle.buttonXlargeBorderRadius
        },
        xlargeSize:{
            fontSize:ButtonStyle.buttonXlargeFontSize,
            fontWeight:ButtonStyle.buttonXlargeFontWeight,
        },
        largeSize:{
            fontSize:ButtonStyle.buttonLargeFontSize,
            fontWeight:ButtonStyle.buttonLargeFontWeight
        },
        smallestSize:{
            fontSize:ButtonStyle.buttonMediumFontSize,
            fontWeight:ButtonStyle.buttonMediumFontWeight,
        },
        sSize:{
            fontSize:ButtonStyle.buttonSmallFontSize,
            fontWeight:ButtonStyle.buttonSmallFontWeight,
        }
    }
    return {
        ButtonStyle,styles
    }
}

export { getButtonStyle }